import React, { useEffect, useRef } from "react";
import * as echarts from 'echarts';
import styels from "./echart.module.scss";
const Circlelinechart = () => {
    let myChart = echarts.init(document.getElementById("Circlechart"));
    let option = {
        color: ['#23649e', '#2e7bad', '#1dc499', '#4da7c1', '#65b5c2', "rgba(250,250,250,0.3)"],
        grid: {
            left: 0,
            // right: 0,
            bottom: 0,
            top: 0,
            containLabel: true
        },
        // grid: {
        //     bottom: 150,
        //     left: 100,
        //     right: '10%'
        // },
        legend: {
            orient: 'vertical',
            top: "middle",
            right: "12%",
            textStyle: {
                color: '#788288',
                fontSize: 13,
            },
            icon: 'roundRect',
            data: [{ "name": "1", "value": 10 },
            { "name": "2", "value": 10 },
            { "name": "3", "value": 10 },
            { "name": "4", "value": 10 },
            { "name": "5", "value": 10 },],
        },
        series: [
            // 主要展示层的
            {
                radius: ['30%', '61%'],
                center: ['50%', '50%'],
                type: 'pie',
                label: {
                    normal: {
                        show: true,
                        formatter: "{c}%",
                        textStyle: {
                            fontSize: 13,
                        },
                        position: 'outside'
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 20,
                        length2: 35
                    },
                    emphasis: {
                        show: true
                    }
                },
                name: "民警训练总量",
                data: [{ "name": "1", "value": 10 },
                { "name": "2", "value": 10 },
                { "name": "3", "value": 10 },
                { "name": "4", "value": 10 },
                { "name": "5", "value": 10 },],
            },
            // 边框的设置
            {
                radius: ['30%', '34%'],
                center: ['50%', '50%'],
                type: 'pie',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                animation: false,
                tooltip: {
                    show: false
                },
                data: [{
                    value: 1,
                    itemStyle: {
                        color: "rgba(250,250,250,0.3)",
                    },
                }],
            }, {
                name: '外边框',
                type: 'pie',
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['50%', '50%'],
                radius: ['65%', '65%'],
                label: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: 9,
                    name: '',
                    itemStyle: {
                        normal: {
                            borderWidth: 2,
                            borderColor: '#61bad3'
                        }
                    }
                }]
            },
        ]
    };
    myChart.setOption(option);
}
const EchartModel = ({
    state = [
        { value: 86947, name: '标的车损险赔款' },
        { value: 3583, name: '三者车物赔款' },
        { value: 3564, name: '三者人伤赔款' },
        { value: 3674, name: '其他赔款' },

    ], options
}) => {
    const ref = useRef();


    const setEchart = ({
        event
    }) => {

        var myChart = echarts.init(event, 'dark');
        // var option;
        myChart.clear();
        let option = {
            backgroundColor: 'rgba(0,0,0,0)',
            color: ['#23649e', '#2e7bad', '#1dc499', '#4da7c1', '#65b5c2', "rgba(250,250,250,0.3)"],
            grid: {
                left: 0,
                // right: 0,
                bottom: 0,
                top: 0,
                containLabel: true
            },
            // grid: {
            //     bottom: 150,
            //     left: 100,
            //     right: '10%'
            // },
            legend: {
                orient: 'vertical',
                top: "middle",
                right: "12%",
                textStyle: {
                    color: '#788288',
                    fontSize: 13,
                },
                icon: 'roundRect',
                data: state

            },
            series: [
                // 主要展示层的
                {
                    radius: ['30%', '61%'],
                    center: ['50%', '50%'],
                    type: 'pie',
                    label: {
                        normal: {
                            show: true,
                            formatter: "{c}%",
                            textStyle: {
                                fontSize: 13,
                            },
                            position: 'outside'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 20,
                            length2: 35
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    name: "民警训练总量",
                    data: state
                },
                // 边框的设置
                {
                    radius: ['30%', '34%'],
                    center: ['50%', '50%'],
                    type: 'pie',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    animation: false,
                    tooltip: {
                        show: false
                    },
                    data: [{
                        value: 1,
                        itemStyle: {
                            color: "rgba(250,250,250,0.3)",
                        },
                    }],
                }, {
                    name: '外边框',
                    type: 'pie',
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    center: ['50%', '50%'],
                    radius: ['65%', '65%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                        value: 9,
                        name: '',
                        itemStyle: {
                            normal: {
                                borderWidth: 2,
                                borderColor: '#61bad3'
                            }
                        }
                    }]
                },
            ]
        };
        myChart.setOption(option);

        option && myChart.setOption(option);


    }




    useEffect(() => {

        setTimeout(() => {
            setEchart({
                event: ref.current
            })
        }, 500)
    }, [ref, state])
    return (
        <>
            <div className={styels.box}>
                <div className="echart" ref={ref}></div>
            </div>
        </>
    )
}
export default EchartModel;